<html>
<head>
	<title>iMusic</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript">

	var player;
	var area;
	var currentIndex;
	var playList = new Array();
	var currentSongLength = 0;
	var songTitle = "";

	function playerReady(obj) {
		var id = obj['id'];
		var version = obj['version'];
		var client = obj['client'];
		player = document.getElementById(id);
		player.addModelListener("STATE", "stateChanged");
		player.addModelListener("TIME", "positionChanged");
	};

	function loadPlaylist(){
		var songs;
		if (!$.cookie("playlist_hunter")){
			songs = [];
		}else{
			songs = ($.cookie("playlist_hunter")).split("|");
		}
		if (songs.length>0){
			$("#playListItems").empty();
			$.each(songs, function(i,item){
				var info = item.split("@");
				var song = new Object();
				song.idSong = info[0];
				song.title = info[1];
				song.duration = info[2];
				playList[playList.length] = song;
			});
		}
	};

	function createPlayer() {
		var flashvars = {
				autostart:"false"
		}
		var params = {
				allowfullscreen:"false",
				allowscriptaccess:"always"
		}
		var attributes = {
				id:"iMusic",
				name:"iMusic"
		}
		swfobject.embedSWF("player.swf", "placeholder1", "0", "0", "9.0.115", false, flashvars, params, attributes);

		y = window.external;

		y.SetEventHandler ('SecondaryWindowMessage', onSecondaryWindowMessage);

		function onSecondaryWindowMessage(msg){
			info = msg.split("|");
			switch (info[0]){
				case "PLAY":
					songTitle = info[4];
					currentIndex = parseInt(info[3]);
					area = info[2];
					currentSongLength = parseInt(info[5]);
					playSong(info[1], songTitle);
					break;
				case "PLAYLIST":
					var song = new Object();
					song.idSong = info[1];
					song.title = info[2];
					song.duration = info[3];
					playList[playList.length] = song;
					break;
			}
		}

		y.LocalReady();
	};

	function stateChanged(obj) {
		if (obj.oldstate=="PLAYING" && obj.newstate == "COMPLETED"){
			if (area == "song"){
				player.sendEvent("PLAY");
			}else if (area == "playlist"){
				nextSong();
			}
		}else if (obj.newstate=="PAUSED"){
		}
	};

	function positionChanged(obj){
		var barLength = 156;
		if (currentSongLength > 0){
			$("#songPosition > a").css("width", obj.position * barLength / currentSongLength);
			var min = parseInt((currentSongLength - obj.position) / 60);
			var second = (currentSongLength - parseInt(obj.position)) % 60;
			$("#playTimer").text("-"+ Right("00" + min, 2) + ":" + Right("00" + second, 2));
			//$("#playTimer").text(obj.position);
		}

	};

	function Right(str, n){
		if (n <= 0)
		   return "";
		else if (n > String(str).length)
		   return str;
		else {
		   var iLen = String(str).length;
		   return String(str).substring(iLen - n, iLen);
		}
	};


	function nextSong(){
		if (playList.length >0){
			currentIndex = (currentIndex + 1) % playList.length;
			currentSongLength = playList[currentIndex].duration;
			playSong(playList[currentIndex].idSong, playList[currentIndex].title);
		}else{
			currentIndex = -1;
		}
	};

	function changeYMStatus(txt, status){
		y.Messenger.Me.Status.SetCustomStatus(txt, status, '', '');
	};

	// Choi mot bai hat voi ID cho truoc
	function playSong(idSong, title){
		$("#titleSong").text(title);
		$.get("fetch.php", { id: idSong, mode: "getsong" },
			function(data){
				player.sendEvent("LOAD",data);
				player.sendEvent("PLAY");
				//changeYMStatus($("#titleSong").text() + "[Hunter] http://chacha.vn/song/" + idSong, true);
			});
	};

	function openSecondWindows(){
		y.SecondaryWindowOpenWithDimensions('http://mtv24h.net/huyvq/extra.html', 400, 300, 'Music Hunter');
	};

    $(document).ready(function() {
		createPlayer();
		loadPlaylist();
		$("#btnPlay").click(function(){
			player.sendEvent("PLAY");
		});
		$("btnNext").click(function(){
			nextSong();
		});
    });

	</script>
	<style type="text/css">
		<!--
		body {
			background-color: #fff;
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			background-image: url(images/Player.gif);
			background-repeat: no-repeat;
		}
		#titleSong{
			position:absolute;
			top: 10px;
			left: 10px;
			font-family: Tahome, Verdana, Arial;
			font-size: 16px;
			font-weight: bold;
			color: #002f64;
		}
		#playTimer{
			position:absolute;
			top: 60px;
			left: 10px;
			font-family: Tahome, Verdana, Arial;
			font-size: 13px;
			font-weight: bold;
			color: #002f64;
		}
		#func {
			position: absolute;
			color: #000;
			height: 24px;
			top: 88px;
		}
		#func a span{
			display: none;
		}
		#func a{
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: 1px;
		}
		#func ul{
			list-style-type:none;
			margin:0;
			padding:0;
		}
		li#btnPlay a, li#btnNext a, li#btnPrevious a, li#btnPlaylist a, li#btnSearch a{
			height: 24px;
			top:0px;
			width: 24px;
		}
		li#btnPlay a{
			background-image: url(images/play.gif);
			background-repeat: no-repeat;
			background-position: 0 -24px;
		}
		li#btnPrevious a{
			background-image: url(images/previous.gif);
			background-repeat: no-repeat;
			background-position: 0 -24px;
			left: 24px;
		}
		li#songPosition a{
			left: 80px;
			top: 8px;
			height: 8px;
			width: 0px;
			background-color: #0CA5CF;
		}
		li#btnNext a{
			background-image: url(images/next.gif);
			background-repeat: no-repeat;
			background-position: 0 -24px;
			left: 48px;
		}
		li#btnPlaylist a{
			background-image: url(images/playlist.gif);
			background-repeat: no-repeat;
			background-position: 0 -24px;
			left: 246px;
		}
		li#btnSearch a{
			background-image: url(images/search.gif);
			background-repeat: no-repeat;
			background-position: 0 -24px;
			left: 270px;
		}
		#func li a:hover { background-position: 0 0px!important; }

		.footersmall {font-size: 10px}
		-->
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="placeholder1"></div>
	</div>
	<div id="titleSong"></div>
	<div id="playTimer"></div>
	<div id="func">
		<ul>
			<li id="btnPlay">
				<a href="#"><span>Play</span></a>
			</li>
			<li id="btnPrevious">
				<a href="#"><span>Previous</span></a>
			</li>
			<li id="btnNext">
				<a href="#"><span>Next</span></a>
			</li>
			<li id="songPosition">
				<a href="#"><span>Song position</span></a>
			</li>
			<li id="btnPlaylist">
				<a href="#" onclick="openSecondWindows()"><span>Playlist</span></a>
			</li>
			<li id="btnSearch">
				<a href="#" onclick="openSecondWindows()"><span>Search</span></a>
			</li>
		</ul>
	</div>
</body>
</html>
